<template>
  <div class="bottom-box" style="position: relative">
    <i class="cjy-sub-button" @click.stop="sub" style="border-radius: 50%"></i>
    <span class="cjy-add-cart-num" style="max-widht:none;text-align: center; color:black;">
          {{number}}{{goodsUnit}}
      </span>
    <i class="cjy-add-button " style="border-radius: 50%" @click.stop="addButton"></i>
  </div>
</template>

<script>
  // import Hello from './components/Hello'

  export default {
    data() {
      return {
        isaddAnimaite: false,
      }
    },
    components: {},
    props: {
      type: {
        default: 0
      },
      fontSize: {
        default: '1.2rem'
      },
      add: {
        type: Function,
        default: () => {
          return () => {
          }
        }
      },
      sub: {
        type: Function,
        default: () => {
          return () => {
          }
        }
      },
      number: {
        default: 0
      },
      goodsUnit: {
        default: ''
      }
    },
    methods: {
      addButton() {
        this.add()
      },
      animateChaneg() {
        setTimeout(() => {
          this.isaddAnimaite = true
          setTimeout(() => {
            this.isaddAnimaite = false
          }, 200)
        }, 200)
      },
    }

  }
</script>

<style scoped>
  .bottom-box {
    display: flex;
    justify-content: flex-end;
    align-content: center;
    background: white;
  }

  .cjy-add-cart-num {
    padding: 0 0.2rem;
  }

  .cjy-add-button, .cjy-sub-button {
    border: 1px solid rgb(234, 57, 57);
    border-radius: 50%;
    height: 1.2rem;
    width: 1.2rem;
    display: block;
    position: relative;
  }

  .cjy-add-button::after, .cjy-sub-button::after, .cjy-add-button::before {
    content: '';
    position: absolute;
    border-radius: 1px;
    background: rgb(234, 57, 57);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cjy-add-button::after, .cjy-sub-button::after {
    width: 50%;
    height: 2px;
  }

  .cjy-add-button::before {
    width: 2px;
    height: 50%;
  }

  .cjy-sub-button {
    border: 1px solid gray;
  }

  .cjy-sub-button::after {
    background: gray;
  }


</style>
